<template>
  <div>

    <el-row :gutter="20">
      选择年份
      <el-select v-model="years" placeholder="请选择" @change="handleselect">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="10">
        <div id="main1" style="width: 400px;height: 400px;margin-left: 100px" data-zoomable data-draggable />
      </el-col>
      <el-col :span="10">
        <div id="main" style="width: 800px;height: 400px;margin-right: 100px" data-zoomable data-draggable />
      </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
      <el-col :span="7">
        <el-card shadow="hover" style="width: 100%;height: 100px;">
          <div style="width: 100%; display: inline-block; ">
            <el-statistic :value="allsale" title="🎉今年总销售额🎉">
              <template slot="suffix">
                元
              </template>
            </el-statistic>
          </div>
        </el-card>
        <el-card shadow="hover" style="width: 100%;height: 100px;">
          <div style="width: 100%; display: inline-block; ">
            <el-statistic :value="allexpenditure" title="🎉今年总支出🎉">
              <template slot="suffix">
                元
              </template>
            </el-statistic>
          </div>
        </el-card>
        <el-card shadow="hover" style="width: 100%;height: 100px;">
          <div style="width: 100%; display: inline-block; ">
            <el-statistic :value="allprofit" title="🎉今年总利润🎉">
              <template slot="suffix">
                元
              </template>
            </el-statistic>
          </div>

        </el-card>
      </el-col>
      <el-col :span="7">

      </el-col>
    </el-row>

  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, reactive, ref } from 'vue'
import orderApi from '@/api/order/order'

const options = reactive([])

const years = ref()
// eslint-disable-next-line no-unused-vars
const handleselect = () => {
  showCustomer(years.value)
}
const option = {
  title: {
    text: '各年度财务支出(元)'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['支出', '销售额', '利润']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
  },
  yAxis: {
    type: 'value'
  }
}

const boption = {
  title: {
    text: '财务支出百分比',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '详细金额(元)',
      type: 'pie',
      radius: '50%',

      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}
const allsale = ref()
const allprofit = ref()
const allexpenditure = ref()

onMounted(async() => {
  allyear()
  showCustomer(years.value)
})

const showCustomer = (years) => {
  option.series = []
  var chartDom = document.getElementById('main')
  var myChart = echarts.init(chartDom)
  option && myChart.setOption(option)

  var chartDom2 = document.getElementById('main1')
  var myChart2 = echarts.init(chartDom2)
  option && myChart2.setOption(boption)

  orderApi.financial(years).then(res => {
    const inprice = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    // eslint-disable-next-line no-unused-vars
    const outprice = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    // eslint-disable-next-line no-unused-vars,new-cap,no-undef,no-array-constructor
    const profit = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    res.data.expenditure.map(item => {
      inprice[item.month - 1] = item.sum
    })
    res.data.sales.map(item => {
      outprice[item.month - 1] = item.sum
    })

    for (let i = 0; i < inprice.length; i++) {
      profit[i] = outprice[i] - inprice[i]
    }

    option && myChart.setOption({
      series: [
        {
          name: '支出',
          type: 'line',
          data: inprice,
          areaStyle: {
            color: '#009ad6',
            opacity: 0.5
          }
        },
        {
          name: '销售额',
          type: 'line',
          data: outprice,
          areaStyle: {
            color: '#72baa7',
            opacity: 0.5
          }
        },
        {
          name: '利润',
          type: 'line',
          data: profit,
          areaStyle: {
            color: '#ffd400',
            opacity: 0.5
          }
        }

      ]
    })
    const allin = inprice.reduce((prev, cur) => prev + cur)
    const allout = outprice.reduce((prev, cur) => prev + cur)
    option && myChart2.setOption({
      series: [
        {
          data: [
            { value: allin, name: '支出' },
            { value: allout, name: '销售' }
          ]
        }
      ]

    })
    allsale.value = allout
    allprofit.value = allout - allin
    allexpenditure.value = allin
  })
}
const allyear = () => {
  const now = new Date()
  const nowyear = now.getFullYear()
  options.push({ value: nowyear, label: '今年' })

  years.value = nowyear
  orderApi.financialyear().then(res => {
    res.data.map(item => {
      const flag = options.find(year => year.value === item)
      if (!flag) {
        options.push({ value: item, label: item })
      }
    })
  })
}

</script>

<style scoped lang="scss">

</style>
